<template>
  <div id="app">
  <transition :name="aniType">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </transition>
    <Tabbar v-show="showTabbar"></Tabbar>
  </div>
</template>

<script>
import Tabbar from '@/components/Tabbar.vue'
export default {
  name:"app",
  data:function(){
    return{
      aniType:""
    }
  },
  components:{
    Tabbar
  },
  computed:{
    showTabbar:function(){
      var deep = this.$route.path.split("/").length-1;
      return deep == 1;
    }
  },
  watch:{
    $route:function(n,o){
      var nDeep = n.path.split("/").length-1;
      var oDeep = o.path.split("/").length-1;
      if(nDeep>oDeep){
        this.aniType = "pagein";
      }else if(nDeep<oDeep){
        this.aniType = "pageout";
      }else{
        this.aniType = "";
      }

      if(n.path == "/"){
        this.$store.commit("setIsActive",1);
      }else if(n.path == "/kind"){
          this.$store.commit("setIsActive",2);
      } else if (n.path == "/second/Public") {
          this.$store.commit("setIsActive",3);
      }else if (n.path == "/second/Message") {
          this.$store.commit("setIsActive",4);
      }else if(n.path =="/second/User"){
          this.$store.commit("setIsActive",5);
      }
    }
  }
}
</script>

<style>

</style>
